<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        ul,
        li {
            list-style-type: none;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            font-family: Arial;
            background-color: #fcfcfc;
            font-size: 18px
        }

        *,
        *:after,
        *:before {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        #wrap {
            height: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            flex-flow: column;
        }

        #main {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }

        .pcc_contentwin .pcc_service {
            width: 100%;
            height: auto;
            padding: 1rem 0.5rem 0 0.5rem;
            position: relative;
            border-bottom: 1px solid #e7e7e7;
            box-shadow: #e7e7e7 0 2px 10px 1px;
        }

        .pcc_contentwin .pcc_service .pcc_servicecase {
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        .pcc_contentwin .pcc_service .pcc_servicecase a {
            width: 33.33%;
            height: auto;
            margin-bottom: 1rem;
            padding-top: 2rem;
        }

        .pcc_contentwin .pcc_service .pcc_servicecase .pcc_xz {
            background: url("../image/function1-icon.png")no-repeat;
            background-position: center 0.1rem;
            background-size: 1.8rem;
        }

        .pcc_contentwin .pcc_service .pcc_servicecase .pcc_tz {
            background: url("../image/function2-icon.png")no-repeat;
            background-position: center 0.1rem;
            background-size: 1.8rem;
        }

        .pcc_contentwin .pcc_service .pcc_servicecase .pcc_qy {
            background: url("../image/function3-icon.png")no-repeat;
            background-position: center 0.1rem;
            background-size: 1.8rem;
        }

        .pcc_contentwin .pcc_service .pcc_servicecase .pcc_aj {
            background: url("../image/function4-icon.png")no-repeat;
            background-position: center 0.1rem;
            background-size: 1.8rem;
        }
        /*.pcc_contentwin .pcc_service .pcc_servicecase .pcc_zg {
            background: url("../image/function5-icon.png")no-repeat;
            background-position: center 0.1rem;
            background-size: 1.8rem;
        }*/

        .pcc_contentwin .pcc_service .pcc_servicecase .pcc_tongzhi {
            background: url("../image/function6-icon.png")no-repeat;
            background-position: center 0.1rem;
            background-size: 1.8rem;
            position: relative;
        }
        .pcc_contentwin .pcc_service .pcc_servicecase .pcc_zc {
            background: url("../image/zc.png")no-repeat;
            background-position: center 0.1rem;
            background-size: 1.8rem;
        }
        .pcc_contentwin .pcc_service .pcc_servicecase .pcc_tongzhi span{
            height: 0.9rem;
            background-color: #fe6263;
            display: block;
            padding: 5px;
            color: #ffffff;
            position: absolute;
            top: 0;
            right: 22%;
            font-size: 0.6rem;
            border-radius: 50%;
            line-height: 0.4rem
        }

        .pcc_contentwin .pcc_service .pcc_servicecase .pcc_sc {
            background: url("../image/function7-icon.png")no-repeat;
            background-position: center 0.1rem;
            background-size: 1.8rem;
        }

        .pcc_contentwin .pcc_service .pcc_servicecase .pcc_zp {
            background: url("../image/function8-icon.png")no-repeat;
            background-position: center 0.1rem;
            background-size: 1.8rem;
        }

        .pcc_contentwin .pcc_service .pcc_servicecase .pcc_gd {
            background: url("../image/more-icon.png")no-repeat;
            background-position: center 0.1rem;
            background-size: 1.8rem;
        }

        .pcc_contentwin .pcc_service .pcc_servicecase a img {
            width: 80%;
            display: block;
            margin: auto;
        }

        .pcc_contentwin .pcc_service .pcc_servicecase a p {
            width: 100%;
            text-align: center;
            line-height: 1.2rem;
            font-size: 0.7rem;
            color: #000000;
        }

        .pcc_contentwin .pcc_service .pcc_text {
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            color: #999999;
            display: flex;
            font-size: 0.66rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
            box-shadow: #e7e7e7 0 2px 10px 1px;
            border-radius: 5px;
        }

        .pcc_contentwin .pcc_service .pcc_text span {
            width: 2rem;
            padding-left: 3px;
            height: 0.8rem;
            margin-top: 0.6rem;
            background: url("../image/horn-icon.png")no-repeat;
            background-position: 0.9rem center;
            background-size: 0.9rem;
        }

        .pcc_contentwin .pcc_service .pcc_text>div {
            width: 17.75rem;
            height: 2rem;
            overflow: hidden;
        }

        .pcc_contentwin .pcc_service .pcc_text>div ul {
            width: 13rem;
            padding: 0;
            position: absolute;
            right: 0;
        }

        .pcc_contentwin .pcc_service .pcc_text>div .pcc_ggtext {
            width: 100%;
            height: 2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: none;
        }
        .pcc_contentwin .pcc_service .pcc_text>div .pcc_ggtext:nth-child(1) {
            display: block;;
        }

        .pcc_contentwin .pcc_jiange {
            width: 100%;
            height: 0.26rem;
            background-color: #eaecef;
        }

        .pcc_contentwin .pcc_jiange7 {
            width: 100%;
            height: 0.7rem;
            background-color: #f2f2f2;
        }

        .pcc_header {
            width: 100%;
            /*height: 2.2rem;*/
            background-color: #fe6263;
            display: flex;
        }

        .pcc_header .pcc_return {
            width: 4rem;
            height: 2.2rem;
            background: url("../image/retun-icon.png")no-repeat;
            background-size: 0.6rem;
            background-position: 0.7rem center;
        }

        .pcc_header .pcc_title {
            width: 12rem;
            height: 2.2rem;
            line-height: 2.2rem;
            color: #ffffff;
            text-align: center;
            font-size: 0.96rem;
        }

        .pcc_header .pcc_shere {
            width: 4rem;
            height: 2.2rem;
            background: url("../image/Personal.png")no-repeat center;
            background-size: 0.8rem;
        }

        .pcc_header .pcc-list {
            width: 4rem;
            height: 2.2rem;
            background: url("../image/list-icon.png")no-repeat;
            background-size: 0.8rem;
            background-position: right 0.7rem center;
        }
        .pcc_foot{
          width: auto;
          height: 3rem;
          background-color: #ffffff;
          color: #8a8a8a;
          display: flex;
          border-top: 1px solid #8a8a8a;
        }
        .pcc_foot>div{
          width: 25%;
          height: 3rem;
          text-align: center;
          line-height: 1rem;
          font-size: 0.7rem;
          padding-top: 0.2rem;
        }
        .pcc_foot>div>.pcc_we{
          width: 100%;
          height: 1.5rem;
          display: block;
          background-image: url("../image/weimg.png");
          background-repeat: no-repeat;
          background-size: 1.1rem;
          background-position: center;
        }
        .pcc_foot>div>.pcc_shouye{
          width: 100%;
          height: 1.5rem;
          display: block;
          background-image: url("../image/shouyeon.png");
          background-repeat: no-repeat;
          background-size: 1.1rem;
          background-position: center;
        }
        .pcc_foot>div>.pcc_taizhang{
          width: 100%;
          height: 1.5rem;
          display: block;
          background-image: url("../image/taizhang.png");
          background-repeat: no-repeat;
          background-size: 1.1rem;
          background-position: center;
        }
        .pcc_foot>div>.pcc_zicha{
          width: 100%;
          height: 1.5rem;
          display: block;
          background-image: url("../image/zicha.png");
          background-repeat: no-repeat;
          background-size: 1.1rem;
          background-position: center;
        }
        .pcc_color{
          color: #fe6263;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div class="pcc_header" id="header">
            <span style="width:4rem"></span>
            <p class="pcc_title">启安云</p>
            <span style="width:4rem"></span>
        </div>
        <div id="main">
            <!-- 轮播占位 -->
            <div class="pcc_bannar"></div>
            <div class="pcc_contentwin">

                <!-- 服务功能板块-->
                <div class="pcc_service">
                    <div class="pcc_text"><span></span>
                        <div>
                            <div class="pcc_gg">
                                <div class="pcc_ggtext">1万宇消防平台隆重上线，超8万家商户争先入驻 165656</div>
                                <div class="pcc_ggtext">1万宇消防平台隆重上线，超8万家商户争先入驻 2</div>
                                <div class="pcc_ggtext">1万宇消防平台隆重上线，超8万家商户争先入驻 3</div>
                                <div class="pcc_ggtext">1万宇消防平台隆重上线，超8万家商户争先入驻 4</div>
                                <div class="pcc_ggtext">1万宇消防平台隆重上线，超8万家商户争先入驻 5</div>
                                <div class="pcc_ggtext">1万宇消防平台隆重上线，超8万家商户争先入驻 6</div>
                                <div class="pcc_ggtext">1万宇消防平台隆重上线，超8万家商户争先入驻 7</div>
                                <div class="pcc_ggtext">1万宇消防平台隆重上线，超8万家商户争先入驻 8</div>
                                <div class="pcc_ggtext">1万宇消防平台隆重上线，超8万家商户争先入驻 9</div>
                                <div class="pcc_ggtext">1万宇消防平台隆重上线，超8万家商户争先入驻 10</div>
                                <div class="pcc_ggtext">1万宇消防平台隆重上线，超8万家商户争先入驻 11</div>
                            </div>
                        </div>
                    </div>
                    <div class="pcc_servicecase">
                        <a class="pcc_tz" href="#" onclick="openpage('parameter');">
                            <p>台账</p>
                        </a>
                        <a class="pcc_zc" href="#" onclick="openpage('check');">
                            <p>企业自查</p>
                        </a>
                        <a class="pcc_tongzhi" href="#" onclick="openpage('notice_list');">
                            <p>通知</p>
                            <span>5</span>
                        </a>
                        <a class="pcc_sc" href="###" onclick="taobao()">
                            <p>商城</p>
                        </a>
                        <a class="pcc_zp" href="#" onclick="openpage('trouble');">
                            <p>隐患管理</p>
                        </a>
                        <a class="pcc_qy" href="#" onclick="openpage('enterprise');">
                            <p>企业</p>
                        </a>
                        <!-- <a class="pcc_gd" href="#">
                          <p>更多</p>
                      </a> -->
                      <!-- <a class="pcc_aj" href="#">
                        <p>安检</p>
                      </a> -->
                      <!-- <a class="pcc_zg" href="#">
                        <p>整改</p>
                       </a> -->
                    </div>
                </div>

            </div>
        </div>
        <div class="pcc_foot">
          <div onclick="openpage('index');" class="pcc_color">
            <span class="pcc_shouye"></span>
            首页
          </div>
          <div onclick="openpage('parameter');">
            <span class="pcc_taizhang"></span>
            台账
          </div>
          <div href="#" onclick="openpage('check');">
            <span class="pcc_zicha"></span>
            企业自查
          </div>
          <div href="#" onclick="openpage('we');">
            <span class="pcc_we"></span>
            我的
          </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
    apiready = function() {
      var header = $api.byId('header');
      //适配iOS 7+，Android 4.4+状态栏
      $api.fixStatusBar(header);

      var headerPos = $api.offset(header);
        var heightBan = 'height:' + api.winWidth / 1.775 + 'px';
        $api.css($api.dom('.pcc_bannar'), heightBan);


        var UIScrollPicture = api.require('UIScrollPicture');
        UIScrollPicture.open({
            rect: {
                x: 0,
                y: headerPos.h,
                w: api.winWidth,
                h: api.winWidth / 1.775
            },
            data: {
                paths: [
                    'widget://image/banner.jpg',
                    'widget://image/banner.jpg',
                    'widget://image/banner.jpg',
                    'widget://image/banner.jpg'
                ]
            },
            styles: {
                caption: {
                    height: 35,
                    color: '#E0FFFF',
                    size: 13,
                    bgColor: '#696969',
                    position: 'bottom'
                },
                indicator: {
                    dot: {
                        w: 10,
                        h: 10,
                        r: 5,
                        margin: 3
                    },
                    align: 'center',
                    color: '#FFFFFF',
                    activeColor: '#8a8a8a'
                }
            },
            placeholderImg: 'widget://res/slide1.jpg',
            contentMode: 'scaleToFill',
            interval: 3,
            fixedOn: api.frameName,
            loop: true,
            fixed: true
        }, function(ret, err) {
            if (ret) {
                // alert(JSON.stringify(ret));
            } else {
                // alert(JSON.stringify(err));
            }
        });


    };
    function taobao() {https://www.taobao.com/
      api.openWin({
                  name : 'win_show2',
                  url : 'https://www.taobao.com/',
                  rect : {
                          x : 0,
                          y : 0,
                  }
          })
            };
    function openpage(url) {
      api.openWin({
              name: url,
              url: './'+url+'.html',
              pageParam: {
                  name: 'test1213'
              }
          });
    };

    $(function (){
      var i = 0;
      var pcc_ggtext = $('.pcc_ggtext');
      var z = pcc_ggtext.length;
      setInterval(function (){
        i++;
        if(i>=z){
          i = 0
        }
        pcc_ggtext.css('display','none');
        pcc_ggtext.eq(i).fadeIn("slow");
      },4000)
    })

</script>

</html>
